<template>
    <div>
        <h1>学生信息</h1>
        <el-input class="Search" v-model="Uname" @keyup.enter.native="Search" placeholder="请输入学生姓名"></el-input>
        <!-- 弹窗添加学生信息 -->
        <el-button type="primary" @click="createdialogVisible = true" style="margin-left: 10px;">
            添加
        </el-button>
        <el-button type="danger" @click="DeleteBatch">
            批量删除
        </el-button>
        <!-- 弹窗添加 -->
        <el-dialog title="添加员工信息" :visible.sync="createdialogVisible" width="40%">
            <add :dialogVisible.sync="createdialogVisible" @Refresh="show('')">

            </add>
        </el-dialog>
        <!-- 弹窗修改 -->
        <el-dialog title="修改员工信息" :visible.sync="editdialogVisible" width="30%">
            <edit v-if="editdialogVisible" @update:editdialogVisible="editdialogVisible = $event" @Refresh="show('')">

            </edit>
        </el-dialog>
        <el-dialog title="新增权限" :visible.sync="perdialogVisible" width="30%">
            <permission v-if="perdialogVisible" @update:perdialogVisible="perdialogVisible = $event" @Refresh="show('')">

            </permission>
        </el-dialog>
        <el-table :data="result" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="userID" label="编号" width="55">
            </el-table-column>
            <el-table-column prop="loginName" label="登录姓名">
            </el-table-column>
            <!-- <el-table-column prop="loginPwd" label="密码">
            </el-table-column> -->
            <el-table-column prop="Path" label="头像" width="100">
                <template #default="{ row }">
                    <!-- 对头像的相对路径转换成绝对路径 -->
                    <el-avatar size="medium" :src="baseImg + row.path"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="用户姓名">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="55">
            </el-table-column>
            <el-table-column prop="birthday" label="出生日期">
            </el-table-column>
            <el-table-column prop="phone" label="手机号">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    <el-switch v-model="row.status" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="lastTime" label="最后修改时间">
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称">
            </el-table-column>
            <el-table-column prop="deptName" label="部门名称">
            </el-table-column>
            <el-table-column prop="" label="操作" width="220">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="remove(scope.row)">删除</el-button>
                    <el-button size="mini" type="warning" @click="Edit(scope.row)">修改</el-button>
                    <el-button size="mini" type="warning" @click="per(scope.row)">权限</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 15px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page" :page-size="size" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>
    </div>
</template>

<script>
import add from './AddUsers.vue'
import edit from './EditView.vue'
import permission from './AddPermissionView.vue'
export default {
    // 正确放置data选项
    data() {
        return {
            baseImg: 'http://localhost:52061/',
            result: [],  // 初始化为数组,
            Uname: "",
            users: {
                loginName: "刘亦菲",
                loginPwd: "123",     
                userName: "刘小菲",  
                sex: "男",       
                birthday: "2025-01-02", 
                phone: "13142249090",          
                imgID: "1",           
                roleID: "",    
            },
            createdialogVisible: false, //控制添加窗口
            editdialogVisible: false, //修改窗口
            perdialogVisible: false, //权限窗口
            selectedRows: [], //选中行的数据
            count: 0,
            size: 10,
            page: 1
        };
    },
    created() {
        this.show('')
    },
    methods: {
        //切换每页条数
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.page = 1;
            this.size = val;
            this.getUsersList();
        },
        //翻页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val;
            this.getUsersList();
        },
        handleSelectionChange(val) {
            this.selectedRows = val;
        },
        //批量删除
        DeleteBatch() {
            if (this.selectedRows.length > 0) {
                let Uname = "";
                let Uid = [];
                this.selectedRows.forEach((v, i) => {
                    Uname += v.Uname + ","
                    Uid[i] = v.Uid
                })
                this.$confirm("确定要删除用户'" + Uname + "'吗?", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios({
                        method: "DELETE",
                        url: "http://localhost:51743/api/Users",
                        data: Uid
                    }).then(res => {
                        if (res) {
                            this.$notify({
                                title: '删除成功!',
                                message: '这是一条成功的提示消息',
                                type: 'success'
                            });
                            this.show('')
                        } else {
                            this.$notify.error({
                                title: '提示!',
                                message: '删除失败!'
                            });
                        }
                    }).catch(err => {

                        console.log("错误信息:", err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            } else {
                this.$notify.error({
                    title: '提示!',
                    message: '请至少选中一行数据进行删除!!!'
                });
            }
        },
        //修改
        Edit(users) {
			console.log("修改用户信息",users)
            this.editdialogVisible = true;
            sessionStorage.setItem("EditUsers", JSON.stringify(users))
        },
        //权限
        per(user){
            console.log(user.userID)
            sessionStorage.setItem("addper",user.userID )
            this.perdialogVisible=true;
        },
        //模糊查询
        Search() {
            this.show(this.Uname)
        },
        //删除数据
        remove(users) {
            this.$confirm("确定要删除用户'" + users.userName + "'吗?", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios({
                    method: "DELETE",
                    url: "Users/" + users.userID,
                }).then(res => {
                    if (res.data.code==1) {
                        this.$message({
                            title: '这是一条成功的提示消息!',
                            message: '删除成功!',
                            type: 'success'
                        });
                        this.show('')
                    } else {
                        alert("删除失败!")
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        //显示数据
        show(Uname) {
            this.axios({
                method: "get",
                url: "Users",
                params: { page: this.page, limit: this.size, name: Uname }
            })
                .then(res => {
                    console.log(res)
                    this.result = res.data.data;
                    this.count = res.data.count;
                })
                .catch(err => {
                    console.error("请求失败:", err);
                    alert("请求失败!!!");
                });
        },


    }, components: {
        add,
        edit,
        permission
    }
}
</script>
<style scoped>
.Search {
    width: 300px;
}
</style>